<template>
    <div class="book-box">
        <el-input ref="userName" name="userName" autocomplete="off" placeholder="请输入搜索内容" v-model="keywords">
            <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-tree :data="userData" :props="defaultProps" :default-expand-all="true" @node-click="handleNodeClick"
            :render-content="renderContent"></el-tree>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { searchUserList } from '@/api/user'
export default {
    data() {
        return {
            keywords: '',
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            userData: [{
                label: '',
                children: []
            }]
        }
    },
    created() {
        this.searchUserList();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo,
            workStatus: state => state.work.workStatus,
        })
    },
    methods: {
        searchUserList() {
            let count = 0;
            searchUserList({ groupId: this.userInfo.group }).then(res => {
                this.userData[0].children = res.userList.map(item => {
                    if (item.isOnline === "1") {
                        count++;
                    }
                    item.label = item.userIdentity
                    return item;
                }).sort((a, b) => {
                    return (b.isOnline === "1") - (a.isOnline === "1");
                });
                this.userData[0].label = `${this.userInfo.cmpUserOrganName} ( ${count} )`
            })


        },
        renderContent(h, { node, data }) {
            if (data.isOnline === '1') {
                return (
                    <span>
                        <span style="color: #ec4f35;">{node.label}</span>
                    </span>
                );
            } else {
                return (
                    <span>
                        <span style="{{color:'gray'}}">{node.label}</span>
                    </span>
                );
            }
        },
        handleNodeClick() {

        }
    },
    watch: {
        workStatus(value) {
            this.searchUserList();
        }
    }
}
</script>
<style lang='scss' scoped>
.el-input {
    margin-top: 10px;

    ::v-deep input {
        height: 35px;
    }
}

.el-tree {
    padding: 20px 50px;

    ::v-deep .el-tree-node__label {
        // font-size: 16px;
    }

    ::v-deep .el-tree-node__expand-icon {
        font-size: 16px;
    }

    ::v-deep .el-tree-node {
        margin: 10px 0;
    }
}
</style>
